<template>
  <div class="otherwish-bg">
    <div class="otherwish-star"></div>
    <blink-star
      :stars="[
        { left: '0.5rem', top: '0.8rem', type: '--yellow-square' },
        { right: '0.5rem', top: '0.8rem', type: '--yellow-square' },
        { left: '2.5rem', top: '0.4rem', type: '--yellow-square' },
        { left: '4.5rem', top: '0.5rem', type: '--cyan' },
        { left: '3.5rem', top: '1.8rem', type: '--yellow-bling' },
      ]"
    />
    <shooting-star />
    <div class="wish-list-wrap">
      <auto-height-block
        class="auto-height-warp"
        :top-bg="topBg"
        :bottom-bg="bottomBg"
        :middle-bg="middleBg"
      >
        <div class="otherwish-title">
          <div class="otherwish-title_user">{{ othersname.nickname }}</div>
          <div class="otherwish-title_icon"></div>
        </div>
        <div class="otherwish_text">
          <div
            v-for="(item, index) in otherswish"
            :key="index"
            class="otherwish_input"
          >
            <span>{{ item.user_wish_name }}</span>
          </div>
          <div class="user-like-num">
            <div class="icon-love"></div>
            <span>{{ othersname.user_liked_num }}</span>
          </div>
        </div>
        <div class="otherwish-btn">
          <template v-if="!isSelf">
            <div class="otherwish-btn1" @click="doSthToWish(false)"></div>
            <div class="otherwish-btn2" @click="doSthToWish(true)"></div>
          </template>
          <div class="otherwish-btn3" @click="goToWish">
            <template v-if="isWishChoosen"> 我的愿望清单 </template>
            <template v-else> 我也要许愿 </template>
          </div>
        </div>
      </auto-height-block>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import autoHeightBlock from '@/activities/bak/qiuqiu/vote/src/components/subcomp/auto-height-block.vue'
import topBg from './images/otherwish/bg-wish-list-top.png'
import middleBg from './images/otherwish/bg-wish-list-repeat.png'
import bottomBg from './images/otherwish/bg-wish-list-bottom.png'
const iconEgg = `${process.env.PUBLIC_PATH}/static/images/timetravel/icon-egg.png`
const iconLove = `${process.env.PUBLIC_PATH}/static/images/timetravel/icon-love.png`
export default {
  components: { autoHeightBlock },
  data () {
    return {
      othersname: {
        nickname: '',
        user_Like_num: ''
      },
      isSelf: false,
      otherswish: [],
      isWishChoosen: false,
      topBg,
      middleBg,
      bottomBg
    }
  },

  watch: {
    '$route': {
      handler (value) {
        const { name, query } = value
        if (name === 'otherwish') {
          let { heyId, currentUserHeyId } = query
          if(!currentUserHeyId){
            currentUserHeyId = localStorage.getItem('currentUserHeyId')
          }
          this.getOthersInfo(Number(heyId))
          this.isSelf = (heyId === currentUserHeyId)
          if(this.isSelf){
            this.$router.replace({ name: 'mywish' })
            return
          }
          const isWishChoosen = localStorage.getItem('wishIsChosen')
          if (isWishChoosen === 'true') {
            this.isWishChoosen = true
          } else {
            this.isWishChoosen = false
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    // this.getOthersInfo()
  },

  methods: {

    checkOptWishStatus () {

    },

    async doSthToWish (isNotBreakEgg) {
      this.$api.Action.checkWishOptInfo().then(res => {
        const { result: { remain_coin: remainCoin, remain_like_num: remainlikeNum } } = res
        if (isNotBreakEgg) {
          if (remainlikeNum <= 20) {
            Dialog.confirm({
              message: '当天免费次数已用完，需支付 10 钻进行点赞哦～'
            }).then(() => {
              if (remainCoin < 10) {
                this.$toast.fail('当前钻石余额不足，请先充值哦～')
              } else {
                this.doOptWish(isNotBreakEgg)
              }
            })
          } else {
            this.doOptWish(isNotBreakEgg)
          }
        } else {
          Dialog.confirm({
            message: '需支付 20 钻进行砸鸡蛋哦～'
          }).then(() => {
            if (remainCoin < 20) {
              this.$toast.fail('当前钻石余额不足，请先充值哦～')
            } else {
              this.doOptWish(isNotBreakEgg)
            }
          })
        }
      })
    },

    async doOptWish (isNotBreakEgg) {
      const data = { 'bear': this.otherswish[0].user_id, action: isNotBreakEgg }
      const res = await this.$api.Action.getActionInfo(data)
      const { result: { msg, code } } = res
      const icon = isNotBreakEgg ? iconLove : iconEgg
      if (code === 200) {
        this.$toast({
          message: msg,
          icon
        })
        const { query: { heyId } } = this.$route
        this.getOthersInfo(Number(heyId))
      } else {
        this.$toast.fail({
          message: msg
        })
      }
    },

    async getOthersInfo (heyId) {
      const params = { 'bear': Number(heyId) }
      const res = await this.$api.Others.postOthersInfo(params)
      const { result: othersname } = res
      const { result: { otherwishs: otherswish } } = res

      this.othersname = {
        ...othersname
      }

      this.otherswish = {
        ...otherswish
      }

    },
    async goToWish () {
      if (this.isWishChoosen) {
        this.$router.push({ name: 'mywish' })
      } else {
        this.$router.push({ name: 'wish' })
      }
    }
    // async getusernum() {
    //   const res = await this.$api.checkWishOptInfo()
    //   const {result}
    // }
  }
}
</script>

<style lang="scss" scoped>
.otherwish-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("./images/rank/bg.jpg") no-repeat, url("./images/rank/bg-mini.jpg") no-repeat;
  background-size: 100% auto;
  background-position: 0 100%;
}
.otherwish-star {
  position: absolute;
  top: 0;
  left: 2%;
  width: 2.25rem;
  height: 1.17rem;
  background-image: url("./images/I_star.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star1 6s infinite;
  @keyframes star1 {
    50% {
      top: -3%;
    }
    100% {
      top: 0%;
    }
  }
}
.otherwish-smallstar1 {
  position: absolute;
  top: 29.2%;
  left: 13.2%;
  width: 6.26rem;
  height: 8.94rem;
  background-image: url("./images/I_smallstar1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: smallstart 3s infinite;
}
.otherwish-smallstar2 {
  position: absolute;
  top: 11.24%;
  left: 2.8%;
  width: 4.35rem;
  height: 9.76rem;
  background-image: url("./images/I_smallstar2.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: smallstart 3s infinite;
}
@keyframes smallstart {
  0%,
  100% {
    transform: scale(0.95);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
.shooting_star {
  position: absolute;
  top: 4.8%;
  left: 13.2%;
  width: 6.36rem;
  height: 10.37rem;
  background-image: url("./images/I_meteor.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: tail 2s ease-in-out infinite, shooting 2s ease-in-out infinite;
  @keyframes tail {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes shooting {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100px);
    }
  }
}
.otherwish-title {
  position: absolute;
  top: 0.6rem;
  left: 25%;
  width: 4.2rem;
  height: 0.97rem;
  @include ellipsis();
  .otherwish-title_user {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0.46rem;
    color: #fff;
    font-size: 18px;
    text-align: center;
    font-weight: 600;
  }
  .otherwish-title_icon {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 2.64rem;
    height: 0.4rem;
    background-image: url("./images/I_title.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
}
.h-text {
  position: absolute;
  top: 13%;
  left: 17.5%;
  width: 4.46rem;
  height: 3.65rem;
  .h-input {
    position: absolute;
    top: 0;
    left: 0;
    height: 26%;
    width: 100%;
    background-image: url("./images/H_input.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
}

.wish-list-wrap {
  position: absolute;
  top: 2rem;
  bottom: 0;
  left: 0;
  right: 0;
  .auto-height-warp {
    height: 100%;
    width: 100%;
    padding-top: 3.2rem;
  }
  ::v-deep .auto-height-block__line-bg {
    top: 8.9rem;
    bottom: 2.48rem;
  }
}
@media screen and (max-height: 580px) {
  .wish-list-wrap {
    top: 0.2rem;
  }
}
.otherwish_text {
  position: relative;
  width: 4.44rem;
  height: 3.9rem;
  line-height: 13px;
  margin: 0 auto;
  flex-direction: column;
  .otherwish_input {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.5rem;
    width: 100%;
    height: 0.9rem;
    background: url("./images/I_input.png") no-repeat;
    background-size: 100% auto;
    span {
      margin: 0 0.2rem 0 0.2rem;
      position: absolute;
      font-size: 12px;
      color: #fff;
    }
  }
}
.user-like-num {
  position: absolute;
  bottom: -0.2rem;
  left: 45%;
  width: 2rem;
  height: 0.25rem;
  font-size: 12px;
  color: #fff;
  line-height: 0.2rem;
  .icon-love {
    position: absolute;
    left: 0;
    margin-left: 0;
    width: 0.26rem;
    height: 100%;
    background-image: url("./images/rank/love.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  span {
    margin-left: 0.3rem;
  }
}
.otherwish-btn {
  position: absolute;
  top: 75.3%;
  left: 17.2%;
  width: 4.8rem;
  height: 2.14rem;
  .otherwish-btn1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.01rem;
    height: 0.79rem;
    background-image: url("./images/I_btn1.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .otherwish-btn2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.01rem;
    height: 0.79rem;
    background-image: url("./images/I_btn2.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .otherwish-btn3 {
    position: absolute;
    bottom: 0%;
    left: 8.1%;
    width: 3.96rem;
    height: 0.89rem;
    background: url("./images/bg-btn-fill.png") no-repeat;
    background-size: 100% auto;
    font-size: 0.35rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
